<template>
  <div class="pt-24px">
    <n-form size="large" :show-label="false" :rules="rules" ref="formRef" :model="model">
      <n-form-item path="phone">
        <n-input v-model:value="model.phone" placeholder="手机号码" />
      </n-form-item>
      <n-form-item path="pwd">
        <n-input
          v-model:value="model.pwd"
          type="password"
          placeholder="密码"
          show-password-on="mousedown"
        />
      </n-form-item>
      <n-form-item path="isCaptcha" v-if="loginSettings.captcha">
        <div class="w-full">
          <mi-captcha :theme-color="theme.themeColor" :logo="checkImg" @success="handleCaptcha" />
        </div>
      </n-form-item>
      <n-space :vertical="true" size="large">
        <div class="flex-y-center justify-between">
          <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
          <span class="text-primary cursor-pointer" @click="toLogin('reset-pwd')">忘记密码?</span>
        </div>
        <n-button
          type="primary"
          size="large"
          :block="true"
          :round="true"
          :loading="loading"
          @click="handleSubmit"
        >
          确定
        </n-button>
        <div class="flex-y-center justify-between">
          <n-button class="flex-1" :block="true" @click="toLogin('code-login')">
            {{ LoginModuleDict['code-login'] }}
          </n-button>
          <div class="w-12px"></div>
          <n-button class="flex-1" :block="true" @click="toLogin('register')">
            {{ LoginModuleDict['register'] }}
          </n-button>
        </div>
      </n-space>
    </n-form>
    <other-login />
  </div>
</template>

<script setup lang="ts">
import { LoginModuleDict } from '@/common'
import { OtherLogin } from '../common'
import { reactive, ref } from 'vue'
import { useRouterChange, useRouteQuery, useLoading } from '@/hooks'
import { FormInst, type FormRules, useNotification } from 'naive-ui'
import { setToken } from '@/utils/auth/user'
import { useThemeStore, useAuthStore } from '@/store'
import { loginSettings } from '@/settings'
import checkImg from '@/assets/img/check.png'

const model = reactive({
  phone: '18888888888',
  pwd: 'abcdef123',
  isCaptcha: false,
})

const rules: FormRules = {
  phone: {
    required: true,
    trigger: ['blur', 'input'], // blur-表示失去焦点, input-表示输入
    message: '请输入手机号',
  },
  pwd: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入密码',
  },
  isCaptcha: {
    required: true,
    type: 'boolean',
    trigger: 'change',
    message: '请点击按钮进行验证码校验',
    validator: (_, value) => value === true,
  },
}

const rememberMe = ref(false)
const { toLogin, toHome, toRedirectName } = useRouterChange()
const { loginRedirectName } = useRouteQuery()
const formRef = ref<(HTMLElement & FormInst) | null>(null)
const notification = useNotification()
const auth = useAuthStore()
const theme = useThemeStore()
const { loading, startLoading, endLoading } = useLoading()

function handleCaptcha() {
  model.isCaptcha = true
}

function handleSubmit() {
  formRef.value?.validate((error) => {
    if (!error) {
      startLoading()
      setTimeout(() => {
        endLoading()
        setToken('tmpToken')
        if (loginRedirectName.value) {
          toRedirectName(loginRedirectName.value)
        } else {
          toHome()
        }
        const { userName } = auth.userInfo
        notification.success({
          title: '登录成功',
          content: `欢迎回来, ${userName}`,
          duration: 3000,
        })
      }, 1000)
    }
  })
}
</script>

<style scoped></style>
